<template>
  <a-layout-content class="content">
    <search-filter 
      @search="handleSearch"
      @reset="handleReset"
    />
    
    <evaluation-table 
      :data="data"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      @evaluate="showEvaluationModal"
    />
    
    <evaluation-form
      :visible="evaluationModalVisible"
      :evaluation="currentEvaluation"
      :loading="confirmLoading"
      @submit="handleEvaluationSubmit"
      @cancel="handleEvaluationCancel"
    />
    
    <success-modal 
      :visible="successModalVisible"
      @ok="handleSuccessOk"
      @cancel="handleSuccessCancel"
    />
  </a-layout-content>
</template>

<script>
import SearchFilter from './modules/SearchFilter'
import EvaluationTable from './modules/EvaluationTable'
import EvaluationForm from './modules/EvaluationForm'
import SuccessModal from './modules/SuccessModal'

export default {
  components: {
    SearchFilter,
    EvaluationTable,
    EvaluationForm,
    SuccessModal
  },
  
  data() {
    return {
      data: [
        {
          id: '1',
          teacherName: '王芳',
          college: '信息工程系',
          courseName: 'Java程序设计',
          classTime: '2023-05-10 08:00-09:40',
          classLocation: '教3-201',
        },
        {
          id: '2',
          teacherName: '李廷',
          college: '机电工程系',
          courseName: '高等数学',
          classTime: '2023-05-10 10:00-11:40',
          classLocation: '教2-305',
        },
        {
          id: '4',
          teacherName: '陈立伟',
          college: '信息工程系',
          courseName: '数据库原理',
          classTime: '2023-05-12 08:00-09:40',
          classLocation: '教3-301',
        },
        {
          id: '5',
          teacherName: '刘老师',
          college: '机电工程系',
          courseName: '线性代数',
          classTime: '2023-05-12 10:00-11:40',
          classLocation: '教2-205',
        },
      ],
      
      pagination: {
        current: 1,
        pageSize: 10,
        total: 5,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '50'],
        showTotal: total => `共 ${total} 条记录`,
      },
      
      loading: false,
      evaluationModalVisible: false,
      confirmLoading: false,
      successModalVisible: false,
      currentEvaluation: {
        teacherName: '',
        courseName: '',
        classTime: '',
        classLocation: '',
      }
    }
  },
  
  methods: {
    handleSearch(value) {
      console.log('搜索:', value);
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message.info(`搜索关键词: ${value}`);
      }, 500);
    },
    
    handleReset() {
      this.$message.success('筛选条件已重置');
    },
    
    handleTableChange(pagination) {
      console.log('表格变化:', pagination);
      this.pagination = { ...this.pagination, ...pagination };
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    
    showEvaluationModal(record) {
      this.currentEvaluation = { ...record };
      this.evaluationModalVisible = true;
    },
    
    handleEvaluationSubmit(values) {
      console.log('评价表单数据:', values);
      this.confirmLoading = true;
      
      setTimeout(() => {
        this.confirmLoading = false;
        this.evaluationModalVisible = false;
        this.successModalVisible = true;
        
        // 计算总分
        let totalScore = 0;
        Object.keys(values).forEach(key => {
          if (key.startsWith('criteria_')) {
            const index = parseInt(key.split('_')[1]);
            const selectedOption = this.$refs.evaluationForm.evaluationCriteria[index].options.find(
              opt => opt.value === values[key]
            );
            if (selectedOption) {
              totalScore += selectedOption.score;
            }
          }
        });
        
        console.log('评价总分:', totalScore);
        this.$message.success(`评价已提交，总分: ${totalScore}`);
      }, 1000);
    },
    
    handleEvaluationCancel() {
      this.evaluationModalVisible = false;
      this.$message.warning('已取消评价');
    },
    
    handleSuccessOk() {
      this.successModalVisible = false;
    },
    
    handleSuccessCancel() {
      this.successModalVisible = false;
    }
  }
}
</script>

<style scoped>
.content {
  background: #fff;
  padding: 24px;
  margin: 0;
  min-height: 280px;
}
</style>